<template>
  <div>
    <footer class="flex-space-betweensb">
      <textarea class="flex-item1" type="text" placeholder="点击输入" maxlength="200" auto-height :fixed="true" v-model="msg"></textarea>
      <div class="send">
        <button v-if="msg" class="" type="primary" @click="sendMsg">发送</button>
        <i v-if="!msg" class="i i-plus-circle-fill theme-c" @click="f.toPage('new-route')"></i>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  components: {},
  data() {
    return {
      msg: '',
      // 消息列表
      msgList: [],
      logs: []
    }
  },
  methods: {
    // 发送消息
    sendMsg() {
      console.log(this.msg)
    }
  },
  computed: {
    ...mapState(['userInfo', 'openId'])
  },
  watch: {},
  create() {},
  mounted() {
    // 挂载
    console.log(this.userInfo)
    console.log(this.userInfo, this.openId, this.d)
  },
  onShow() {
    // 活动时
  }
}
</script>

<style scope lang="scss">
@import '../../asset/css/index.scss';
page {
  background-color: $bg0;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  padding: 30px 120px 0px 30px;
  textarea {
    // max-height: 120px;
    margin-bottom: 30px;
    width: auto;
  }
}
.send {
  position: absolute;
  right: 10px;
  bottom: 20px;
  width: 100px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  button {
    font-size: 30px;
    padding: 0;
    height: 60px;
    line-height: 60px;
  }
  i {
    font-size: 60px;
    &:active {
      color: darken($themeCol, 8%);
    }
  }
}
</style>
